<template>
  <svg aria-hidden="true" :style="{ width: `${size}px`, height: `${size}px` }">
    <use :href="symbolId" :fill="color" />
  </svg>
</template>

<script setup lang="ts">
interface Props {
  name: string;
  color?: string;
  size?: number;
  prefix?: string;
}
const props = withDefaults(defineProps<Props>(), {
  color: "#333",
  size: 16,
  prefix: "icon",
});
const symbolId = computed(() => `#${props.prefix}-${props.name}`);
</script>
